{extend name='public/layer_base' /}
{block name='content'}
<div class="layui-fluid content">
    <div class="layui-card layui-col-md4">
        <div class="layui-card-header">
            <h3 class="box-title">表单生成</h3>
        </div>
        <div class="layui-card-body">

            <div class="layui-row">
                <form class="layui-form" method="post" action="formField">

                    <div class="layui-form-item">

                        <label for="form_name" class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input maxlength="50" id="form_name" autocomplete="off" name="form_name" class="layui-input"
                                placeholder="请输入名称">
                        </div>
                    </div>
                    <div class="layui-form-item">

                        <label for="field_name" class="layui-form-label">字段</label>
                        <div class="layui-input-inline">
                            <input maxlength="50" id="field_name" autocomplete="off" name="field_name"
                                class="layui-input" placeholder="请输入字段">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="form_type" class="layui-form-label">类型</label>
                        <div class="layui-input-inline">
                            <div class="input-group">
                                <select id="form_type" name="form_type" lay-search>
                                    <option value="text">文本[text]</option>
                                    <option value="number">数字[number]</option>
                                    <option value="password">密码[password]</option>
                                    <option value="mobile">手机号[mobile]</option>
                                    <option value="email">邮箱[email]</option>
                                    <option value="id_card">身份证号[id_card]</option>
                                    <option value="url">网址[url]</option>
                                    <option value="ip">IP地址[ip]</option>
                                    <option value="texterea">文本域[textarea]</option>
                                    <option value="checkbox">复选[checkbox]</option>
                                    <option value="switch">开关[switch]</option>
                                    <option value="radio">单选[radio]</option>
                                    <option value="select">选择列表[select]</option>
                                    <option value="multi_select">多项选择列表[multi-select]</option>
                                    <option value="image">图片上传[image]</option>
                                    <option value="multi_image">多图上传[multi-image]</option>
                                    <option value="file">文件上传[file]</option>
                                    <option value="multi_file">多文件上传[multi-file]</option>
                                    <option value="date">日期[date]</option>
                                    <option value="date_range">日期范围[date-range]</option>
                                    <option value="datetime">日期时间[datetime]</option>
                                    <option value="datetime_range">日期时间范围[datetime-range]</option>
                                    <option value="year">年[year]</option>
                                    <option value="year_range">年范围[year-range]</option>
                                    <option value="year_month">年月[year-month]</option>
                                    <option value="year_month_range">年月范围[year-month-range]</option>
                                    <option value="map">地图选点[map]</option>
                                    <option value="color">颜色选择[color]</option>
                                    <option value="icon">图标选择[icon]</option>
                                    <option value="editor">富文本编辑器[editor]</option>
                                    <option value="province_city_district">省市区[三级联动]</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        {:token_field()}
                        <label for="L_repass" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="submitForm" id="submit" lay-submit="submit"
                            type="button">生成</button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            重置
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>


    <div class="layui-card layui-col-md4">

        <div class="layui-card">
            <div class="layui-card-header">
                <h3 class="box-title">生成结果</h3>
            </div>
            <div class="layui-card-body">
                <textarea id="code" class="layui-textarea" placeholder="生成结果" rows="7"></textarea>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label"></label>
                <button class="layui-btn clipboard-btn  " data-clipboard-target="#code">
                    复制到剪切板
                </button>
            </div>
        </div>

    </div>

</div>

{js href="__ADMIN_PLUGINS__/clipboard/clipboard.min.js" /}

<script>
    // button的class的值
    var clipboardDemos = new ClipboardJS('.clipboard-btn');
    clipboardDemos.on('success', function (e) {
        e.clearSelection();
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        layer.msg('复制成功');
    });
    clipboardDemos.on('error', function (e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        console.log('复制失败');
    });
</script>

<script>
    $(function () {
        layui.use(['form', 'layer', 'jquery', 'table', 'element'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer;


            form.on('submit(submitForm)', function (data) {
                let loadT = layer.msg('正在提交，请稍候…', {
                    icon: 16,
                    time: 0,
                    shade: [0.3, "#000"],
                    scrollbar: false,
                });
                $.ajax({
                    url: data.form.action,
                    dataType: 'json',
                    type: data.form.method,
                    data: data.field,
                    success: function (result) {
                        layer.close(loadT);
                        layer.msg(result.msg, {
                            icon: result.code ? 1 : 2,
                            scrollbar: false,
                        });
                        $('#code').val(result.data);
                      goUrl(result.url);
                    },
                    error: function (xhr, type, errorThrown) {

                        layer.msg('访问错误,代码' + xhr.status, {
                            icon: 2,
                            scrollbar: false,
                        });
                    }
                });
                return false;

            });


        });
    });

</script>
{/block}